<!DOCTYPE html>

<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>按列查找</title>
    <style>
        hr {
               height: 0.2em;              /*水平线高：0.2字符尺寸*/
                border: 0;                  /*无边框*/
                color: #CCCCCC;             /*前景色：浅灰色*/
                background-color: #CCCCCC;  /*背景色：浅灰色*/
                text-indent: 0;             /*文本缩进：无*/
        }
    </style>
</head>
<script type="text/javascript" src="../js/util.js"></script>
<script type="text/javascript" src="../js/findpane.js"></script>
<script type="text/javascript" src="../.debugTemp/wpsjsrpcsdk.js"></script>
<body>
    <div class="global">
        
        <button onclick="onbuttonclick('setDataSource')">将选定区域设置为查找源数据</button>
        <p style="width:100%;text-align: center;">
            <textarea id="txtDataSource" rows="3" cols="30" title="Set Data Source"
                      style="margin-left:auto;width:98%;margin-right:auto;"></textarea>
        </p>

        <p><input type="CheckBox" id="ckxSourceDataWithTitle" checked="true" title="Set Source Data With Title"
                  style="vertical-align:top;"/><span style="font-weight: bold;vertical-align: top;">源数据区域首行是标题</span></p>

        <hr>

        <p style="font-weight: bold;">请选择以源数据的哪一列作为查找时的匹配目标：</p>
        <p style="width:100%;margin-top:3px;margin: bottom 3px;;">
            <select id="destColumn" title="Set Dest Column"></select>
        </p>

        <hr>

        <button onclick="onbuttonclick('setFindColumn')">
            将选定区域设置为查找条件</button>
        <p>注意：只支持单列作为查找条件！</p>
        <p style="width:100%;text-align: center;">
            <textarea id="txtFindColumn" rows="3" cols="30" title="查找源数据"
                      style="margin-left:auto;width:98%;margin-right:auto;"></textarea>
        </p>
        
        <p style="font-weight: bold;">请选择以查找数据的哪一列作为查找条件（默认最后一列）：</p>
        <p style="width:100%;margin-top:3px;margin: bottom 3px;;">
            <select id="conditionColIndex" title="Set Condition Column Index"></select>
        </p>

        <p><input type="CheckBox" title="按标题查找" id="ckxFindWithTitle" checked="true" style="vertical-align:top;"/><span style="font-weight: bold;vertical-align: top;">查找条件区域首行（第一个单元格）是标题</span></p>
        
        <hr style="height:5px;">
        <p style="font-weight: bold;">请勾选要出现在查找结果中的列：</p>

        <hr style="height:5px;">

        <div id='resultDiv' style="margin:3px;width:220px;height:auto;"></div>
        
        <p style="text-align: center;">
            <button onclick="onbuttonclick('checkAllFields')" style="width: 50px;">全选</button>
            <button onclick="onbuttonclick('unCheckAllFields')" style="width: 60px;">全不选</button>
            <button onclick="onbuttonclick('switchCheckAllFields')" style="width: 50px;">反选</button>
        </p>
        
        <button onclick="onbuttonclick('btnFind')">执行查找</button>
        
        <hr style="height:5px;">
        <p style="margin: 3px;color: brown;">
            　　说明：本功能是 vlookup() 函数的替代品，适用于懒得写 vlookup() 函数的同学。<br>
            　　使用方法：<br>
            　　1. 先选择要从其中查找数据的单元格区域，设置为源数据；<br>
            　　2. 再选择要查找条件列（例如人名列、身份证号列等）；<br>
            　　3. 再指定要在源数据哪一列进行比对查找；<br>
            　　4. 设置数据源和查找条件区域的首行是否标题；<br>
            　　5. 执行查找，找到的数据会出现在一个新工作表中。<br>
            　　注意：首尾空白字符会被忽略；全角字符会被转换为半角字符。
        </p>
    </div>
</body>

<style>
    .global{
        min-height: 95%;
    }
    .divItem{
        margin-left: 5px;
        margin-bottom: 18px;
        word-wrap:break-word;
    }
    body {
        font-size: 11px;
    }
    button {
        font-size: 11px;
        width: 100%;
        padding: 4px 10px;
        margin-top: 5px;
    }
    select {
        height: 24px;
        width: 100%;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    hr {
        height:5px;
    }
</style>
</html>
